import { useBreakpoint } from 'antd'; // 引入useBreakpoint来检测屏幕尺寸

const BubbleChat = ({items, placeholderNode,  RenderMarkdown}) => {
  const {styles }= useStyle();
  const listRef = React.useRef(null);
  const { xs, sm, md, lg, xl } = useBreakpoint(); // 获取屏幕尺寸信息

  return (
    <Bubble.List
      ref={listRef}
      roles={roles}
      items={
        items.length > 0
          ? items
          : [
              {
                content: placeholderNode,
                variant: 'borderless',
              },
            ]
      }
      className={styles.messages}
      autoScroll={true}
      style={{ fontSize: xs ? '12px' : '16px' }} // 根据屏幕尺寸调整字体大小
    />
  );
};